<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGL学习例子</title>
    <style>
      .container {
        margin-left: 30px;
        padding: 30px;
        border: solid 1px;
        width: 250px;
      }
      h5 {
        margin: 5px 0;
      }
      a {
        display: block;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h5>一、WebGL入门</h5>
      <a href="./1.1.helloPoint1.html">绘制一个固定的点</a>
      <a href="./1.2.helloPoint2.html">绘制一个给定的点</a>
      <a href="./1.3.drawPoint.html">鼠标绘制点</a>
      <a href="./1.4.drawPoint1.html">鼠标绘制不同颜色的点</a>
      <a href="./1.5.drawMultiPoint.html">绘制多个点</a>
      <br />
      <h5>二、绘制和变换三角形</h5>
      <a href="./2.1.drawTriangle.html">绘制三角形</a>
      <a href="./2.2.drawTriangle_translate.html">绘制三角形(平移)</a>
      <a href="./2.3.drawTriangle_rotate.html">绘制三角形(旋转)</a>
      <a href="./2.4.drawTriangle_matrix_translate.html"
        >绘制三角形(平移矩阵)</a
      >
      <a href="./2.5.drawTriangle_matrix_scale.html">绘制三角形(缩放矩阵)</a>
      <a href="./2.6.drawTriangle_matrix_rotate.html">绘制三角形(旋转矩阵)</a>
      <br />
      <h5>三、高级变换和动画基础</h5>
      <a href="./3.1.drawTriangle_matrix_t_r.html">绘制三角形(旋转平移矩阵)</a>
      <a href="./3.2.basic_animation.html">基础动画</a>
      <br />
      <h5>四、颜色与纹理</h5>
      <a href="./4.1.multiAttributeSize.html">多尺寸点(分开数据)</a>
      <a href="./4.2.multiAttributeSize_interleaved.html">多尺寸点(整体数据)</a>
      <a href="./4.3.coloredTriangle.html">彩色三角形</a>
      <a href="./4.4.texturedQuad.html">简单纹理贴图</a>
      <br />
      <h5>五、进入三维世界</h5>
      <a href="./5.1.lookatTriangles.html">视点三角形</a>
      <a href="./5.2.lookAtRotatedTriangles.html">模型视图三角形</a>
      <a href="./5.3.lookAtTrianglesWithKeys.html">键盘改变视点位好置</a>
      <a href="./5.4.orthoView.html">正射投影</a>
      <a href="./5.5.perspectiveView.html">透视投影</a>
      <a href="./5.6.helloCube.html">绘制渐变色面的正方体</a>
      <a href="./5.7.coloredCube.html">绘制不同颜色面的正方体</a>
      <br />
      <h5>六、光照</h5>
      <a href="./6.1.lightedCube.html">光照立方体</a>
      <br />
      <h5>七、测试</h5>
      <a href="./7.1.test.html">测试</a>
      <h5>八、DEMO</h5>
      <a href="./8.1.demoRobot/index.html">移动机器人</a>
      <br />
    </div>
  </body>
</html>
